<template>
    <div class="bg-[#fff]  rounded-[1.1rem] border border-[#F3F4F6] p-[1.5rem] shadow-[0px_2px_8px_0px_#0F172A0A]">
        <p class="text-[1rem] font-[Inter] font-normal leading-[1.5rem] text-[#000000]">优质作者</p>
        <div class="flex flex-col gap-[1rem]">
            <div class="flex items-center justify-between  gap-[1rem]" v-for="item in data" :key="item.name">
                <div class="flex items-center gap-[0.75rem]">
                    <img :src="item.avatar" class="w-[2rem] h-[2rem] rounded-full" />
                    <div class="flex flex-col">
                        <p class="text-[1rem] font-[Inter] font-normal leading-[1.5rem] text-[#000000]">{{ item.name }}</p>
                        <p class="text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#6B7280]">发布主题{{ item.huozhan }}篇</p>
                    </div>
                </div>
                <p class="text-[0.875rem] font-[Inter] font-normal leading-[1.25rem] text-[#6B7280]">获赞 {{ item.huozhan }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const data = ref([
    {
        avatar: '/public/images/avatar.png',
        name: '小鹅',
        num: 1,
        huozhan: 121
    },
    {
        avatar: '/public/images/avatar.png',
        name: '马可乐',
        num: 1,
        huozhan: 96
    }
])
</script>
<style scoped lang="scss">

</style>
